<template>
  <div class="home">
    <k-header title="hello">
       <i class="cubeic-tag"></i>
    </k-header>
     <cube-slide :data="slider" :interval="5000"> 
          <cube-slide-item v-for="(item,index) of slider" :key='index'>
              <router-link :to="`/detail/${item.id}`">
                 <img :src="item.img" alt="" class="slide" style="width:100%">
              </router-link>
          </cube-slide-item>
     </cube-slide>
     <!-- <good-list :data="goods" @cartanim="$refs.ca.start($event)"></good-list> -->
       <good-list :data="goods" @cartanim="startCartAnim"></good-list> 
     <!-- <cart-anim ref="ca"></cart-anim> -->
  </div>
</template>

<script>
// @ is an alias to /src
 import CartAnim from '@/components/CartAnim.vue'
import gs from '@/service/goods'
import GoodList from '@/components/GoodList'
import KHeader from '@/components/Header.vue'
export default {
  name: 'home',
  components: {
    GoodList,
    KHeader
    // CartAnim
  },
  methods:{
    startCartAnim(el){
      //创建一个实例bing让他开始
            // const anim = this.$createCartAnim({
            //   onTransitionend(){
            //     anim.remove();
            //   }
            //    })
            // anim.start(el);


        // 使用方式2
      const anim = this.$create(CartAnim, {
        pos: {left:'46%', bottom:'30px',color:'blue'}
      });
      anim.start(el);
      anim.$on('transitionend', anim.remove)
    }
  },
  data(){
    return{
       slider:[],
       goodsinfo:{},
       keys:[]
    }
  },
  computed:{
    goods(){
          return this.keys.flatMap(key=>this.goodsinfo[key])
    }
  },
  created(){
   // console.log(111)
   gs.getGoogsinfo().then(res=>{
       console.log(res)
       const {slider,goodsinfo,keys } = res;
       this.slider=slider;
       this.goodsinfo=goodsinfo;
       this.keys=keys
   })
    // axios.get('/api/userinfo').then(res=>console.log(res.data))
  }
}
</script>
